<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>密码显隐</title>
    <style>
        .box{
            width: 300px;
            border-bottom: 1px solid rgb(180, 164, 164);
            margin: 10px auto;
            padding: 0px;
        }
        .box1{
            width: 300px;
            border-bottom: 1px solid rgb(180, 164, 164);
            margin: 25px auto;
        }
        .box1 input{
            width: 100px;
            height: 30px;
            border: 0px;
            outline: none;
        }
        .box input{
            width: 100px;
            height: 30px;
            border: 0px;
            outline: none;
        }
        /* .box2 input{
            width: 300px;
            margin: 20px auto;
        } */
    </style>
</head>
<body>
    <div class="box1">
        <input type="text" name="" id="" placeholder = "请输入用户名">
    </div>
    <div class="box">
        <!-- 此处<label>标签内的button可换成img图标 -->
    <label><input type="button" value="显示/隐藏" id="xy"></label>
    <input id="pwd" type="password" placeholder = "请输入密码"></div>
    <div style="margin:10px auto;width:300px;">
    <input type="submit" value="登录">
    </div>
    <script>
        var pw=document.getElementById("pwd");
        var xy=document.getElementById("xy")
        var flag = 0;
        xy.onclick=function(){
            if(flag==0){
                pw.type="text";
                flag=1;
                // 若<label>内已经更换图片可在此处直接更换图片链接
            }else{
                pw.type="password";
                flag=0;
            }
            
        }
    </script>
</body>
</html>